<template>
  <el-card style="height: 100%">
    <!-- 1.面包屑 -->
    <MyBread url="student" level1="预约情况查询" />
    <!-- 2.空数据图片显示 -->
    <el-empty
      description="快去预约吧"
      v-if="currentStudentAppoint === null"
    ></el-empty>
    <!-- 3.时间线 -->
    <el-timeline v-else style="margin-top: 30px;">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :timestamp="activity.timestamp"
        placement="top"
      >
        <el-card>
          <h4>{{ activity.content }}</h4>
          <p>{{ activity.secContent }} {{ activity.timestamp }}</p>
          <p>{{ activity.thrContent }} {{ activity.selectedDate }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ReverseQuery",
  computed: {
    ...mapState("StudentModule", ["currentStudentInfo"]),
  },
  data() {
    return {
      currentStudentAppoint: null, // 当前学员预约信息
      // 时间线：前两个为已预约但未确认，第三个为确认，第四个为预约时间已过
      activities: [],
    };
  },
  async mounted() {
    // 获取学员的信息
    await this.$store.dispatch("StudentModule/getCurrentStudentInfo");
    // 根据学员信息获取学员预约信息
    const { data } = await this.$https.getUserData({
      url: "/studentAppoint",
      identify: this.currentStudentInfo.identify,
    });
    if (data.length !== 0) {
      this.currentStudentAppoint = data[0];
      // TimeLine 1: 学员预约
      this.activities.push({
        content: "学员预约",
        secContent: "学员 开始于",
        type: "primary",
        icon: "el-icon-more",
        timestamp: this.currentStudentAppoint.submitTime.slice(0, 10),
      });
      // TimeLine 2: 学员提交预约
      this.activities.push({
        content: "学员提交预约",
        secContent: "学员 提交于",
        thrContent: "预约时间 ",
        color: "#13ce66",
        selectedDate: this.currentStudentAppoint.selectedDate,
        timestamp: this.currentStudentAppoint.submitTime,
      });
      // TimeLine 3: 教练确认预约
      if (this.currentStudentAppoint.isSure) {
        this.activities.push({
          content: "教练确认预约",
          secContent: "教练 确认于",
          color: "#13ce66",
          timestamp: this.currentStudentAppoint.confirmTime,
        });
      }
      // 判断预约日期是否已经过去
      let date = new Date(this.currentStudentAppoint.selectedDate);
      if (Date.now() > date.getTime()) {
        // TimeLine 4: 预约时间结束
        this.activities.push({
          content: "预约结束",
          secContent: "预约 自动结束于",
          thrContent: "可以再次预约 ",
          color: "#ff4949",
          timestamp:
            date.getFullYear() +
            "/" +
            (date.getMonth() + 1) +
            "/" +
            date.getDate(),
        });
      }
    }
  },
};
</script>